<template>
    <div class="received-container">
        <div v-if="mostExpectedList">
            <div class="received-container">
                <div class="top-rated">
                    <p class="title">近期最受期待</p>
                    <div class="top-rated-list">
                        <div class="top-rated-item" v-for="item in mostExpectedList" :key="item.id">
                            <div class="poster default-img-bg">
                                <img :src="item.img" />
                                <span class="wish-bg"></span>
                                <span class="score">{{ item.wish }}人想看</span>
                            </div>
                            <h5 class="name line-ellipsis">{{ item.nm }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-html="rateMovies" v-else></div>
    </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from "vue";
import { getRatedMovies } from "network/Home/index";
defineProps({
    mostExpectedList: Array,
});

const rateMovies = ref();

onMounted(async () => {
    const res = await getRatedMovies();
    rateMovies.value = res;
});
</script>

<style lang="less">
.received-container {
    .top-rated {
        width: 358px;
        height: 198px;
        padding: 12px 0 12px 15px;
        margin-bottom: 10px;
        background-color: #fff;
        overflow: hidden;
        p {
            font-size: 14px;
            color: #333;
        }
        .top-rated-list {
            .flex-center-between();
            width: 100%;
            height: 100%;
            white-space: nowrap;
            overflow-x: scroll;
            .top-rated-item {
                display: inline-block;
                width: 85px;
                height: 141px;
                margin-right: 10px;
                .poster {
                    position: relative;
                    margin-bottom: 6px;
                    img {
                        width: 85px;
                        height: 115px;
                    }
                    .wish-bg {
                        display: inline-block;
                        width: 100%;
                        height: 35px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
                    }
                    .score,
                    .wish {
                        position: absolute;
                        left: 4px;
                        bottom: 2px;
                        color: #faaf00;
                        font-size: 11px;
                        font-weight: 600;
                        .rated-score,
                        .wish-num {
                            color: #faaf00;
                            font-size: 11px;
                            font-weight: 600;
                        }
                    }
                }
                h5 {
                    font-size: 13px;
                    color: #222;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>
